{% extends 'base.html' %}
{% load static %}
{% block title %}
    站内文档
{% endblock %}

{% block mycss %}
    {{ block.super }}
<style>
    .document {
    }
    .document > h5 > a {
        color: blue;
    }
    .document > h5 > a:hover {
        color: blue;
        text-decoration: underline;
    }
    .document-title {
        margin-top: 40px;
        font-size: 22px;
        color: white;
        background: #a49e3c;
        padding: 10px 0;
        width: 200px;
        text-align: center;
        border-radius: 0 30px 30px 0;
        box-shadow: #21566f 1px 1px 1px;
        border-left: #dae1e4 6px solid;
        display:block;
        text-shadow: rgba(7, 84, 152, 0.71) 1px 1px 1px;
    }
</style>
{% endblock %}

{% block content %}
    <script>
        function click_download(name) {
            $.ajax({
                type: 'GET',
                //data: {'name': name, csrfmiddlewaretoken: '{{ csrf_token }}'},
                url: '{% url 'document:download' %}?name=' + name,
                datatype: JSON,
                success:function (data) {
                    console.log("ajax刷新下载成功！");
                },
                error:function () {
                    console.log('ajax刷新分页数据失败！');
                }
            });
        }

    </script>

    <article>
        <aside>
        <div class="my-container">
            <h2 class="document-title"><b>站内文档</b></h2>
            <br>
            <table style="margin-left: 60px">
                <tr>
                    <th>文档名</th>
                    <th style="padding-left: 60px">下载次数</th>
                </tr>
                {% for doc in documents %}
                    <tr>
                        <td>
                        <div class="document">
                            <h5><a href="{{ doc.url }}" target="_blank" onclick="click_download('{{ doc.name }}')">{{ doc.name }}</a></h5>
                        </div>
                        </td>
                        <td style="padding-left: 60px">{{ doc.download_count }}</td>
                    </tr>
                {% endfor %}
            </table>
            <br>
        </div>
        </aside>
    </article>
{% endblock %}




